<template>
  <div class="bkt">
    <van-nav-bar :title="type" left-arrow @click-left="$router.go(-1)" />
    <div class="bxq" v-if="iss">
      <div class="bll">
        <h2>
          {{ type }}
        </h2>
      </div>
      <div class="bxq1" v-for="(v, k) in det" :key="k">
        <img class="bimg" :src="baseurl + v.imgSrc" alt="" />
        <span>{{ v.title }}</span>
      </div>
    </div>
    <!-- 尾部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="phone-o" text="电话" @click="showPopup()" />
      <van-popup v-model="show" position="bottom" :style="{ height: '18%' }">
        <p
          @click="dh()"
          style=" text-align: center;
      font-size: 20px;
       height:26px
       display: block; 
       "
        >
          13338380438
        </p>
        <p
          @click="go()"
          style="
            text-align: center;
            font-size: 20px;
            display: block;
            height: 54px;
            background: #f4f4f4;
            line-height: 54px;
          "
        >
          取消
        </p>
      </van-popup>
      <van-goods-action-icon icon="location-o" text="地址" @click="dz()" />
      <van-goods-action-button type="warning" text="马上咨询" @click="ts()" />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      // showShare: false,
      baseurl: "",
      det: {},
      type: "",
      iss: 0,
    };
  },
  methods: {
    getXq() {
      this.$api.GetCaseDet(this.$route.query).then((res) => {
        console.log(res);
        this.iss = 1;
        this.baseurl = res.data.baseurl;
        this.det = res.data.data;
        this.type = res.data.type;
      });
    },
    showPopup() {
      this.show = true;
    },
    go() {
      //   console.log(6666);
      this.show = false;
    },
    ts() {
      Toast({
        message: "电脑不支持提交表单",
        position: "top",
      });
    },
    dz() {
      Toast({
        message: "电脑不支持查看地址",
        position: "top",
      });
    },
    dh() {
      Toast({
        message: "电脑端不支持拨打电话,请在手机上查看",
        position: "top",
      });
      this.show = false;
    },
  },
  mounted() {
    this.getXq();
  },
};
</script>

<style  scoped="scoped">
.bkt {
  width: 100%;
  height: 900px;
  /* /* height: 1000px; */
  background: #f4f4f4;
}
.bxq {
  width: 100%;
  height: 250px;
  background: white;
  /* background: chartreuse; */
}
.bxq1 {
  width: 100%;
  height: 250px;
  background: white;
}
.bimg {
  width: 92%;
  height: 210px;
  background: cornsilk;
  border: none;
  margin-left: 15px;
  margin-top: 10px;
  border-radius: 5px 5px 0px 0px;
}
.bxq1 span {
  width: 92%;
  height: 20px;
  display: block;
  /* background: olive; */
  margin-left: 15px;
  margin-top: 0px;
  font-size: 12px;
  /* color: #ccc; */
}
.bll {
  width: 100%;
  height: 40px;
  background: white;
  margin-top: -14px;
  line-height: 40px;
}
.bll h2 {
  margin-left: 10px;
}
</style>